<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>移动端权限授权</title>
    <link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
    <link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../lib/zTree/css/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="../../static/css/skins.css">
    <script type="text/javascript" src="../../lib/vue/vue.js"></script>
    <script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
    <script type="text/javascript" src="../../lib/element-ui/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
    <script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
    <script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
    <script type="text/javascript" src="../../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../lib/zTree/js/jquery.ztree.all.min.js"></script>
    <script type="text/javascript" src="../../static/js/webApi.js"></script>
    <script type="text/javascript" src="../../static/js/tool.js"></script>
    <style type="text/css">
        /*
            找到html标签、body标签，和挂载的标签
            都给他们统一设置样式
        */
        html,
        body,
        #app,
        .el-container {
            /*设置内部填充为0，几个布局元素之间没有间距*/
            padding: 0px;
            /*外部间距也是如此设置*/
            margin: 0px;
            /*统一设置高度为100%*/
            height: 100%;
        }

        .el-main {
            padding: 0px;
        }
        .el-icon-folder{
            color: #409EFF;
        }
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body class="skin-blue">
<el-container id="app" v-cloak>
    <el-header style="height: 40px;">
        <el-form :inline="true" :model="queryData" ref="queryData" label-width="80px" label-position="right"
                 size="mini" style="margin: 5px 5px 0px 2px" @submit.native.prevent>
            <el-form-item>
                <el-button size="mini" icon="el-icon-folder" @click="submitEvent()" :disabled="disabled" v-cloak>
                    保存权限
                </el-button>
            </el-form-item>
        </el-form>
    </el-header>
    <el-main>
        <el-container>
            <el-main>
                <vxe-grid border size="medium" :tree-config="tableTreeConfig" resizable ref="xGrid"
                          :radio-config="tableRadio" :header-cell-style="{'text-align':'center'}"
                          @radio-change="radioChange" :loading="dataLoading" :data="tableData" :columns="tableColumn">
                </vxe-grid>
            </el-main>
            <el-aside width="45%" style="background-color: white;border: 1px solid #e8eaec;">
                <ul id="ztree" class="ztree"></ul>
            </el-aside>
        </el-container>
    </el-main>
</el-container>
</body>
<script type="text/javascript">
    window.onload = function () {
        var main = {
            data() {
                return {
                    tableColumn: [{
                        // type: "radio",
                        field: 'label',
                        title: '角色名称',
                        width: '70%',
                        treeNode: "true",
                    },
                        {
                            //获取描述字段
                            field: 'dsc',
                            title: '描述',
                        },
                    ],
                    tableTreeConfig: {
                        children: 'children',
                        accordion: false, // 一层只允许展开一个节点
                        expandAll: false, // 默认是否全部展开
                        iconClose: 'el-icon-arrow-right',
                        iconOpen: 'el-icon-arrow-up',
                    },
                    dataLoading: false,
                    loading: false,
                    disabled: false,
                    visible: false,
                    tableHeight: '100%',
                    tableData: [],
                    tablePage: {
                        perfect: true,
                        total: 0,
                        currentPage: 1,
                        pageSize: 30,
                        align: 'left',
                        pageSizes: [30, 50, 100, 200],
                        layouts: [
                            'Sizes',
                            'PrevJump',
                            'PrevPage',
                            'Number',
                            'NextPage',
                            'NextJump',
                            'FullJump'
                        ]
                    },
                    tableRadio: {
                        trigger: 'row',
                        highlight: true
                    },
                    submitLoading: false,
                    selectRow: null,
                    showEdit: false,
                    queryData: {
                        keyword: ""
                    },
                    setting: {
                        async: {
                            enable: true,
                            url: `${curl}/menuapp/getMenuZtree`,
                            type: 'post',
                            autoParam: ["menuCode"],
                            otherParam: {
                                appId: ''
                            }
                        },
                        check: {
                            enable: true,
                            chkStyle: 'checkbox',
                            radioType: "all"
                        },
                        data: {
                            key: {
                                name: "menuName"
                            },
                            simpleData: {
                                enable: true,
                                idKey: "menuCode",
                                pIdKey: "parentCode",
                                rootPId: '0'
                            }
                        },
                        view: {
                            showLine: true,
                            dblClickExpand: false,
                            //fontCss: $.fn.getFontCss
                        },
                        callback: {
                            onAsyncSuccess: this.zTreeOnAsyncSuccess,
                            onClick: this.zTreeOnClick,
                        }
                    }
                }
            },
            created() {
                this.findList();
                // this.getBtn();
            },
            mounted() {
                this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 5;
                //window.innerHeight:浏览器的可用高度
                //this.$refs.table.$el.offsetTop：表格距离浏览器的高度
                //后面的50：根据需求空出的高度，自行调整
                $.fn.zTree.init($("#ztree"), this.setting);
            },
            methods: {
                getBtn() {
                    this.tableToolbar.buttons = Tool.getButton()
                },
                //分页
                // handlePageChange({
                //     currentPage,
                //     pageSize
                // }) {
                //     this.tablePage.currentPage = currentPage
                //     this.tablePage.pageSize = pageSize
                //     this.findList()
                // },
                findList() {
                    this.dataLoading = true
                    this.loading = true;
                    var object = this;
                    webApi("/role/getRoleOptions", "post", {}, function (data) {
                        object.tableData = data.data;
                        object.tablePage.total = data.data.total
                        object.dataLoading = false;
                    }, function () {
                        object.tableData = [];
                        object.tablePage.total = 0
                        object.dataLoading = false;
                    });
                },
                zTreeOnAsyncSuccess() {
                    var treeObj = $.fn.zTree.getZTreeObj("ztree");
                    treeObj.expandAll(false);
                },
                zTreeOnClick(event, treeId, treeNode) {
                    var treeObj = $.fn.zTree.getZTreeObj("ztree");
                    if (treeNode.checked) {
                        treeObj.checkNode(treeNode, false, true, true);
                    } else {
                        treeObj.checkNode(treeNode, true, true, true);
                    }
                },
                getRoleMenuCode(roleCode) {
                    const loading = this.$loading({
                        lock: true,
                        text: '加载中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    var treeObj = $.fn.zTree.getZTreeObj("ztree");
                    treeObj.checkAllNodes(false);
                    let params = Object.assign({
                        roleId: roleCode
                    });
                    var object = this;
                    webApi("/role/getRoleAppMenuCode", "post", params, function (data) {
                        var menus = data.data;
                        if (menus.length > 0) {
                            menus.forEach(function (item, index) {
                                var node = treeObj.getNodeByParam("menuCode", item.powerId,
                                    null);
                                if (node) {
                                    treeObj.checkNode(node, true, false, false);
                                }
                            });
                        }
                    }, null);
                    loading.close();
                },
                radioChange({
                                row,
                                rowIndex,
                                $rowIndex,
                                column,
                                columnIndex,
                                $columnIndex,
                                $event
                            }) {
                    this.getRoleMenuCode(row.value);
                },
                submitEvent() {
                    let row = this.$refs.xGrid.getRadioRecord();
                    console.log(row)
                    if (!row) {
                        this.$message({
                            message: '请选择需要授权的角色!',
                            type: 'warning'
                        });
                        return false;
                    }

                    var treeObj = $.fn.zTree.getZTreeObj("ztree");
                    var checkedNodes = treeObj.getCheckedNodes(true);
                    if (checkedNodes.length <= 0) {
                        this.$message({
                            message: '请选择至少一个菜单!',
                            type: 'warning'
                        });
                        return false;
                    }
                    var checkMenuCodes = new Array;
                    for (var i = 0; i < checkedNodes.length; i++) {
                        checkMenuCodes.push(checkedNodes[i].menuCode);
                    }
                    let params = Object.assign({
                        roleId: row.value,
                        powerId: checkMenuCodes.toString()
                    });
                    this.disabled = true;
                    var object = this;
                    webApi("/role/grantRoleAppMenuCode", "post", params, function (data) {
                        if (data.code == 200) {
                            object.disabled = false;
                            object.$message({
                                message: data.msg,
                                type: 'success',
                                center: true
                            });
                        } else {
                            object.disabled = false;
                            object.$message({
                                message: data.msg,
                                type: 'error',
                                center: true
                            });
                        }
                    }, null);
                },
                searchEvent(formName, acType) {
                    if (acType == 0) {
                        this.queryData = {
                            keyword: ""
                        }
                        // this.$refs[formName].resetFields();
                    }
                    this.tablePage.currentPage = 1
                    this.findList()
                },
                formatDate({
                               cellValue
                           }) {
                    return XEUtils.toDateString(cellValue, 'yyyy-MM-dd')
                }
            }
        };

        var vue = Vue.extend(main);
        new vue().$mount('#app');
    }
</script>

</html>